


<template>
  <div>

    <button 
      @click="openModal"
      v-show="!modalShow"
      class="openModal"
      >打开</button>

    <modal
      width="500"
      :confirm-btn="confirmText"
      cancel-btn="取消"
      :modal-show="modalShow"
      modal-title="This is my MODAL"
      type="warning"
      :disabled="disabled"
      @modal-confirm="modalConfirm"
      @modal-cancel="modalCancel"
    >

      <my-form
        :my-username="myUsername"
        :my-password="myPassword"
        @updata:my-username="updateMyUsername"
        @updata:my-password="updateMyPassword"
      ></my-form>
    </modal>
  </div>
</template>

<!-- 
    传入不同的type 颜色是不同的
    primary    blue
    success    green
    danger     red
    warning    orange
 -->


<script>
import Modal from './components/Modal/index.vue'
import MyForm from './components/MyForm/index.vue'

export default {
  name: 'App',
  components: {
    Modal,
    MyForm
  },
  data() {
    return {
      modalShow: true,
      myUsername: '',
      myPassword: '',
      confirmText: '确定',
      disabled:false
    }
  },
  methods: {
    openModal() {
      this.modalShow = true;
    },
    modalConfirm() {
      this.confirmText = '提交中...';
      this.disabled = true;
      setTimeout(() => {
        console.log(this.myUsername, this.myPassword);
        this.myUsername = '';
        this.myPassword = '';
        this.confirmText = '确定'
        this.disabled = false;
      }, 1000);
    },
    modalCancel() {
      this.modalShow = false;
    },
    updateMyUsername(newValue) {
      this.myUsername = newValue;
    },
    updateMyPassword(newValue) {
      this.myPassword = newValue;
    }
  }
}
</script>

<style>
.openModal {
  background-color: orange;
  color: #333;
  margin: 100px auto;
}
</style>


<!-- Model 结束啦 -->